<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaskMaster - 待办事项管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'gray-light': '#F2F3F5',
                        'gray-medium': '#86909C',
                        'gray-dark': '#4E5969'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .task-transition {
                transition: all 0.3s ease;
            }
            .hover-scale {
                transition: transform 0.2s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .animate-fadeIn {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                0% { opacity: 0; transform: translateY(10px); }
                100% { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-light min-h-screen flex flex-col">
<!-- 导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-check-square-o text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">TaskMaster</h1>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="#dashboard" class="text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-tachometer mr-1"></i> 仪表盘
            </a>
            <a href="#tasks" class="text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-list-ul mr-1"></i> 任务列表
            </a>
            <a href="#calendar" class="text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-calendar mr-1"></i> 日历
            </a>
            <a href="#analytics" class="text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-bar-chart mr-1"></i> 数据分析
            </a>
        </div>

        <div class="flex items-center space-x-4">
            <button class="hidden md:block px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                <i class="fa fa-plus mr-1"></i> 新建任务
            </button>
            <div class="relative">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
            </div>
            <button class="md:hidden text-gray-dark text-xl" id="mobile-menu-button">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="md:hidden h-0 overflow-hidden transition-all duration-300" id="mobile-menu">
        <div class="px-4 py-2 space-y-3 bg-white shadow-inner">
            <a href="#dashboard" class="block py-2 text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-tachometer mr-1"></i> 仪表盘
            </a>
            <a href="#tasks" class="block py-2 text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-list-ul mr-1"></i> 任务列表
            </a>
            <a href="#calendar" class="block py-2 text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-calendar mr-1"></i> 日历
            </a>
            <a href="#analytics" class="block py-2 text-gray-dark hover:text-primary transition-colors">
                <i class="fa fa-bar-chart mr-1"></i> 数据分析
            </a>
            <button class="w-full mt-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                <i class="fa fa-plus mr-1"></i> 新建任务
            </button>
        </div>
    </div>
</header>

<!-- 主要内容 -->
<main class="flex-grow container mx-auto px-4 py-6">
    <!-- 欢迎区域 -->
    <section id="dashboard" class="mb-8">
        <div class="bg-gradient-to-r from-primary to-primary/80 rounded-2xl p-6 shadow-lg text-white">
            <div class="flex flex-col md:flex-row md:items-center justify-between">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2">欢迎回来，李明!</h2>
                    <p class="text-white/80 mb-4">今天是 2025 年 6 月 30 日，星期一</p>
                    <div class="flex flex-wrap gap-3">
                        <div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
                            <p class="text-sm text-white/80">今日任务</p>
                            <p class="text-xl font-bold">5 个</p>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
                            <p class="text-sm text-white/80">已完成</p>
                            <p class="text-xl font-bold">3 个</p>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
                            <p class="text-sm text-white/80">待处理</p>
                            <p class="text-xl font-bold">2 个</p>
                        </div>
                        <div class="bg-white/10 backdrop-blur-sm px-4 py-2 rounded-lg">
                            <p class="text-sm text-white/80">逾期</p>
                            <p class="text-xl font-bold">0 个</p>
                        </div>
                    </div>
                </div>
                <div class="mt-6 md:mt-0">
                    <img src="https://picsum.photos/id/1/400/300" alt="任务管理" class="rounded-lg shadow-md hidden md:block">
                </div>
            </div>
        </div>
    </section>

    <!-- 任务区域 -->
    <section id="tasks" class="mb-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-bold text-dark">我的任务</h2>
            <div class="flex items-center space-x-2">
                <button class="px-3 py-1 text-sm bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors" id="add-task-btn">
                    <i class="fa fa-plus mr-1"></i> 新建任务
                </button>
                <div class="relative">
                    <input type="text" placeholder="搜索任务..." class="pl-9 pr-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-medium"></i>
                </div>
            </div>
        </div>

        <!-- 任务过滤器 -->
        <div class="flex flex-wrap gap-2 mb-6">
            <button class="px-4 py-2 bg-primary text-white rounded-lg">全部</button>
            <button class="px-4 py-2 bg-white text-gray-dark rounded-lg hover:bg-gray-light transition-colors">待办</button>
            <button class="px-4 py-2 bg-white text-gray-dark rounded-lg hover:bg-gray-light transition-colors">进行中</button>
            <button class="px-4 py-2 bg-white text-gray-dark rounded-lg hover:bg-gray-light transition-colors">已完成</button>
            <button class="px-4 py-2 bg-white text-gray-dark rounded-lg hover:bg-gray-light transition-colors">高优先级</button>
        </div>

        <!-- 任务列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 任务卡片 1 -->
            <div class="bg-white rounded-xl shadow-sm p-5 hover-scale hover:shadow-md task-transition animate-fadeIn">
                <div class="flex justify-between items-start mb-3">
                    <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">高优先级</span>
                    <div class="text-gray-medium">
                        <i class="fa fa-ellipsis-h cursor-pointer hover:text-dark transition-colors"></i>
                    </div>
                </div>
                <h3 class="text-lg font-semibold mb-2">完成项目提案文档</h3>
                <p class="text-gray-dark text-sm mb-4">撰写并提交下季度项目的详细提案，包括预算和时间表。</p>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="w-5 h-5 text-primary rounded border-gray-300 focus:ring-primary">
                        <span class="ml-2 text-sm text-gray-dark">标记为已完成</span>
                    </div>
                    <span class="text-xs text-gray-medium">
                            <i class="fa fa-calendar-o mr-1"></i> 今天
                        </span>
                </div>
            </div>

            <!-- 任务卡片 2 -->
            <div class="bg-white rounded-xl shadow-sm p-5 hover-scale hover:shadow-md task-transition animate-fadeIn" style="animation-delay: 0.1s">
                <div class="flex justify-between items-start mb-3">
                    <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">中优先级</span>
                    <div class="text-gray-medium">
                        <i class="fa fa-ellipsis-h cursor-pointer hover:text-dark transition-colors"></i>
                    </div>
                </div>
                <h3 class="text-lg font-semibold mb-2">与设计团队开会</h3>
                <p class="text-gray-dark text-sm mb-4">讨论新产品界面的设计方向和用户体验优化。</p>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="w-5 h-5 text-primary rounded border-gray-300 focus:ring-primary">
                        <span class="ml-2 text-sm text-gray-dark">标记为已完成</span>
                    </div>
                    <span class="text-xs text-gray-medium">
                            <i class="fa fa-calendar-o mr-1"></i> 今天 14:00
                        </span>
                </div>
            </div>

            <!-- 任务卡片 3 -->
            <div class="bg-white rounded-xl shadow-sm p-5 hover-scale hover:shadow-md task-transition animate-fadeIn" style="animation-delay: 0.2s">
                <div class="flex justify-between items-start mb-3">
                    <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已完成</span>
                    <div class="text-gray-medium">
                        <i class="fa fa-ellipsis-h cursor-pointer hover:text-dark transition-colors"></i>
                    </div>
                </div>
                <h3 class="text-lg font-semibold mb-2 line-through text-gray-medium">准备演示文稿</h3>
                <p class="text-gray-dark text-sm mb-4 line-through text-gray-medium">为客户会议准备产品功能演示材料。</p>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" checked class="w-5 h-5 text-primary rounded border-gray-300 focus:ring-primary">
                        <span class="ml-2 text-sm text-gray-medium">标记为已完成</span>
                    </div>
                    <span class="text-xs text-gray-medium">
                            <i class="fa fa-calendar-o mr-1"></i> 昨天
                        </span>
                </div>
            </div>

            <!-- 任务卡片 4 -->
            <div class="bg-white rounded-xl shadow-sm p-5 hover-scale hover:shadow-md task-transition animate-fadeIn" style="animation-delay: 0.3s">
                <div class="flex justify-between items-start mb-3">
                    <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">低优先级</span>
                    <div class="text-gray-medium">
                        <i class="fa fa-ellipsis-h cursor-pointer hover:text-dark transition-colors"></i>
                    </div>
                </div>
                <h3 class="text-lg font-semibold mb-2">更新项目文档</h3>
                <p class="text-gray-dark text-sm mb-4">添加新功能说明和API文档到项目Wiki。</p>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="w-5 h-5 text-primary rounded border-gray-300 focus:ring-primary">
                        <span class="ml-2 text-sm text-gray-dark">标记为已完成</span>
                    </div>
                    <span class="text-xs text-gray-medium">
                            <i class="fa fa-calendar-o mr-1"></i> 明天
                        </span>
                </div>
            </div>

            <!-- 任务卡片 5 -->
            <div class="bg-white rounded-xl shadow-sm p-5 hover-scale hover:shadow-md task-transition animate-fadeIn" style="animation-delay: 0.4s">
                <div class="flex justify-between items-start mb-3">
                    <span class="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">中优先级</span>
                    <div class="text-gray-medium">
                        <i class="fa fa-ellipsis-h cursor-pointer hover:text-dark transition-colors"></i>
                    </div>
                </div>
                <h3 class="text-lg font-semibold mb-2">审核开发代码</h3>
                <p class="text-gray-dark text-sm mb-4">审查团队成员提交的代码变更并提供反馈。</p>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input type="checkbox" class="w-5 h-5 text-primary rounded border-gray-300 focus:ring-primary">
                        <span class="ml-2 text-sm text-gray-dark">标记为已完成</span>
                    </div>
                    <span class="text-xs text-gray-medium">
                            <i class="fa fa-calendar-o mr-1"></i> 7月1日
                        </span>
                </div>
            </div>

            <!-- 添加任务卡片 -->
            <div class="bg-white rounded-xl shadow-sm p-5 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center h-full cursor-pointer hover:border-primary transition-colors">
                <i class="fa fa-plus text-3xl text-gray-medium mb-2"></i>
                <p class="text-gray-dark">添加新任务</p>
            </div>
        </div>
    </section>

    <!-- 日历和数据统计 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 日历区域 -->
        <section id="calendar" class="lg:col-span-2 bg-white rounded-xl shadow-sm p-5">
            <h2 class="text-xl font-bold text-dark mb-4">任务日历</h2>

            <!-- 月份导航 -->
            <div class="flex justify-between items-center mb-4">
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-chevron-left"></i>
                </button>
                <h3 class="text-lg font-semibold">2025年6月</h3>
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>

            <!-- 星期标题 -->
            <div class="grid grid-cols-7 mb-2">
                <div class="text-center text-gray-medium text-sm font-medium">日</div>
                <div class="text-center text-gray-medium text-sm font-medium">一</div>
                <div class="text-center text-gray-medium text-sm font-medium">二</div>
                <div class="text-center text-gray-medium text-sm font-medium">三</div>
                <div class="text-center text-gray-medium text-sm font-medium">四</div>
                <div class="text-center text-gray-medium text-sm font-medium">五</div>
                <div class="text-center text-gray-medium text-sm font-medium">六</div>
            </div>

            <!-- 日期网格 -->
            <div class="grid grid-cols-7 gap-1">
                <!-- 上个月的日期 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center text-gray-400 text-sm">28</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center text-gray-400 text-sm">29</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center text-gray-400 text-sm">30</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center text-gray-400 text-sm">31</div>
                </div>

                <!-- 当月日期 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">1</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">2</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">3</div>
                </div>

                <!-- 第二行 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">4</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">5</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">6</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">7</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">8</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">9</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">10</div>
                </div>

                <!-- 第三行 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">11</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">12</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">13</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">14</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">15</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">16</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">17</div>
                </div>

                <!-- 第四行 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">18</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">19</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">20</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">21</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">22</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">23</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">24</div>
                </div>

                <!-- 第五行 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">25</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">26</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">27</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">28</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">29</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full bg-primary/10 rounded-lg p-1 text-center font-medium cursor-pointer border-2 border-primary">30</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">1</div>
                </div>

                <!-- 第六行 -->
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">2</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">3</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">4</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">5</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">6</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center hover:bg-gray-light cursor-pointer">7</div>
                </div>
                <div class="aspect-square p-1">
                    <div class="h-full rounded-lg p-1 text-center text-gray-400 text-sm">8</div>
                </div>
            </div>

            <!-- 今日任务标记 -->
            <div class="mt-4">
                <h4 class="font-medium mb-2">6月30日任务</h4>
                <div class="space-y-2">
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
                        <span class="text-sm">完成项目提案文档</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
                        <span class="text-sm">与设计团队开会</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 数据分析区域 -->
        <section id="analytics" class="bg-white rounded-xl shadow-sm p-5">
            <h2 class="text-xl font-bold text-dark mb-4">任务分析</h2>

            <!-- 完成率图表 -->
            <div class="mb-6">
                <h3 class="text-sm font-medium text-gray-dark mb-3">本周任务完成率</h3>
                <div class="h-48">
                    <canvas id="completionChart"></canvas>
                </div>
            </div>

            <!-- 优先级分布 -->
            <div class="mb-6">
                <h3 class="text-sm font-medium text-gray-dark mb-3">任务优先级分布</h3>
                <div class="h-48">
                    <canvas id="priorityChart"></canvas>
                </div>
            </div>

            <!-- 任务统计 -->
            <div class="space-y-4">
                <div class="flex justify-between items-center">
                    <span class="text-gray-dark">总任务数</span>
                    <span class="font-semibold">24</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-dark">已完成</span>
                    <span class="font-semibold text-success">16</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-dark">进行中</span>
                    <span class="font-semibold text-warning">5</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-dark">待处理</span>
                    <span class="font-semibold text-danger">3</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-dark">完成率</span>
                    <span class="font-semibold text-primary">66.7%</span>
                </div>
            </div>
        </section>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-check-square-o text-primary text-xl"></i>
                    <span class="font-bold text-dark">TaskMaster</span>
                </div>
                <p class="text-gray-medium text-sm mt-1">高效管理你的任务和时间</p>
            </div>

            <div class="flex space-x-6">
                <a href="#" class="text-gray-medium hover:text-primary transition-colors">
                    <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-medium hover:text-primary transition-colors">
                    <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-medium hover:text-primary transition-colors">
                    <i class="fa fa-linkedin text-xl"></i>
                </a>
            </div>
        </div>

        <div class="mt-6 pt-6 border-t border-gray-200 text-center text-gray-medium text-sm">
            &copy; 2025 TaskMaster. 保留所有权利.
        </div>
    </div>
</footer>

<!-- 新建任务模态框 -->
<div id="task-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-lg w-full max-w-md mx-4 transform transition-all">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-xl font-bold text-dark">新建任务</h3>
            <button id="close-modal" class="text-gray-medium hover:text-dark transition-colors">
                <i class="fa fa-times text-xl"></i>
            </button>
        </div>

        <div class="p-5">
            <form>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-dark mb-1">任务标题</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" placeholder="输入任务标题">
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-dark mb-1">任务描述</label>
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50" rows="3" placeholder="输入任务描述"></textarea>
                </div>

                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-dark mb-1">优先级</label>
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                            <option>低</option>
                            <option>中</option>
                            <option selected>高</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-dark mb-1">截止日期</label>
                        <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-dark mb-1">标签</label>
                    <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">
                                工作 <button class="ml-1 text-primary/70 hover:text-primary"><i class="fa fa-times-circle"></i></button>
                            </span>
                        <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">
                                设计 <button class="ml-1 text-blue-600 hover:text-blue-800"><i class="fa fa-times-circle"></i></button>
                            </span>
                        <input type="text" class="px-3 py-1 border border-dashed border-gray-300 rounded-full text-sm placeholder:text-gray-medium" placeholder="添加标签">
                    </div>
                </div>

                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-task" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-light transition-colors">取消</button>
                    <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">创建任务</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
    // 移动端菜单切换
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    mobileMenuButton.addEventListener('click', () => {
        if (mobileMenu.classList.contains('h-0')) {
            mobileMenu.classList.remove('h-0');
            mobileMenu.classList.add('h-auto');
            mobileMenuButton.innerHTML = '<i class="fa fa-times"></i>';
        } else {
            mobileMenu.classList.add('h-0');
            mobileMenu.classList.remove('h-auto');
            mobileMenuButton.innerHTML = '<i class="fa fa-bars"></i>';
        }
    });

    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    let lastScrollTop = 0;

    window.addEventListener('scroll', () => {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollTop > 10) {
            navbar.classList.add('py-2', 'shadow');
            navbar.classList.remove('py-3');
        } else {
            navbar.classList.add('py-3');
            navbar.classList.remove('py-2', 'shadow');
        }

        lastScrollTop = scrollTop;
    });

    // 任务模态框
    const taskModal = document.getElementById('task-modal');
    const addTaskBtn = document.getElementById('add-task-btn');
    const closeModal = document.getElementById('close-modal');
    const cancelTask = document.getElementById('cancel-task');

    addTaskBtn.addEventListener('click', () => {
        taskModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    });

    function closeModalFunc() {
        taskModal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    closeModal.addEventListener('click', closeModalFunc);
    cancelTask.addEventListener('click', closeModalFunc);

    // 点击模态框外部关闭
    taskModal.addEventListener('click', (e) => {
        if (e.target === taskModal) {
            closeModalFunc();
        }
    });

    // 图表初始化
    window.addEventListener('DOMContentLoaded', () => {
        // 完成率图表
        const completionCtx = document.getElementById('completionChart').getContext('2d');
        new Chart(completionCtx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '完成率',
                    data: [65, 70, 55, 80, 90, 85, 100],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        ticks: {
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });

        // 优先级分布图表
        const priorityCtx = document.getElementById('priorityChart').getContext('2d');
        new Chart(priorityCtx, {
            type: 'doughnut',
            data: {
                labels: ['高', '中', '低'],
                datasets: [{
                    data: [5, 12, 7],
                    backgroundColor: [
                        '#F53F3F',
                        '#FF7D00',
                        '#00B42A'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    });
</script>
</body>
</html>
